<template>
  <div>
    <el-container>
      <el-header
        id="header"
        data-offset-top="70"
        style="height: 70px"
        :class="{ 'home-header': true, 'home-header-fixed': show }"
      >
        <nav class="navbar-inverse" id="daohang">
          <div class="daohang">
            <div class="navbar-header clearfix">
              <button type="button" class="zd" id="zd">
                <span class="glyphicon glyphicon-align-justify"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="daohangtiao">
              <ul class="nav navbar-nav">
                <li>
                  <a @click="toMain()" href="javascript:void(0);">首页</a>
                </li>
                <li>
                  <a @click="toIdentity()" href="javascript:void(0);">识别</a>
                </li>
                <li>
                  <a @click="toCourse()" href="javascript:void(0);">教程</a>
                </li>
                <li>
                  <a @click="toLearn()" href="javascript:void(0);">学习</a>
                </li>
                <li
                  class="wd1"
                  @mouseover="showOther()"
                  @mouseleave="hiddenOther()"
                >
                  <a href="javascript:void(0);">其他</a>
                  <ul class="wd2 clearfix">
                    <li class="pull-left" style="width: 233px">
                      <p><a href="#" class="a1">教程中心</a></p>
                      <ul class="ul1 pull-left">
                        <li><a href="#">快速入门</a></li>
                        <li><a href="#">手语培训</a></li>
                        <li><a href="#">客服问答</a></li>
                      </ul>
                      <ul class="ul2 pull-left">
                        <li><a href="#">识别记录</a></li>
                        <li><a href="#">我的收藏</a></li>
                      </ul>
                    </li>
                    <li class="pull-left clearfix" style="width: 219px">
                      <p><a href="#" class="a1">版本更新日志</a></p>
                      <ul class="ul1">
                        <li>
                          <a href="#" title="系统升级日志：V1.06"
                            >系统升级日志：V1.06</a
                          >
                        </li>
                        <li>
                          <a href="#" title="系统升级日志：V1.05 & V1.06"
                            >系统升级日志：V1.05 ...</a
                          >
                        </li>
                        <li>
                          <a href="#" title="系统升级日志：V1.03"
                            >系统升级日志：V1.03</a
                          >
                        </li>
                        <li>
                          <a href="#" title="系统升级日志：V1.01"
                            >系统升级日志：V1.01</a
                          >
                        </li>
                      </ul>
                    </li>
                    <li class="pull-left clearfix" style="width: 479px">
                      <p><a href="#" class="a1">资讯</a></p>
                      <ul class="ul1">
                        <li>
                          <a href="#" title="怎么快速有效的学习手语?"
                            >怎么快速有效的学习手语?</a
                          >
                        </li>
                        <li>
                          <a
                            href="#"
                            title="如何看待手语律师第一人唐帅自学手语为聋哑人直播普法，对于帮助残疾人我们还能做些什么？"
                            >如何看待手语律师第一人唐帅...</a
                          >
                        </li>
                        <li>
                          <a
                            href="#"
                            title="2019“感动中国”候选人提名，手语律师、翻译唐帅"
                            >2019“感动中国”候选人提名，手语律师...</a
                          >
                        </li>
                        <li>
                          <a href="#" title="手语律师刘莹：守护“无声群体”的正义"
                            >手语律师刘莹：守护“无声群体”...</a
                          >
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="gy1">
                  <a
                    href="javascript:void(0);"
                    @mouseover="showAbout()"
                    @mouseleave="hiddenAbout()"
                    >关于</a
                  >
                  <ul class="gy2 clearfix">
                    <li class="pull-left clearfix" style="width: 130px">
                      <p><a href="#" class="a1">团队介绍</a></p>
                      <ul class="ul1">
                        <li><a href="#">团队介绍</a></li>
                        <li><a href="#">服务条款</a></li>
                        <li><a href="#">法律声明</a></li>
                        <li><a href="#">可接受服务</a></li>
                        <li><a href="#">免责声明</a></li>
                      </ul>
                    </li>
                    <li class="lianxi pull-left clearfix" style="width: 478px">
                      <p><a href="#" class="a1">联系客服</a></p>
                      <ul class="col-lg-12 col-md-12">
                        <li><a href="#" class="aa1">客户服务热线</a></li>
                        <li><a href="#" class="aa2">5981-000-721</a></li>
                        <li><a href="#" class="aa1">QQ客户中心</a></li>
                        <li><a href="#" class="aa2">888888888</a></li>
                        <li><a href="#" class="aa1">团队地址</a></li>
                        <li>
                          <a href="#" class="aa2">湖南省衡阳市南华大学</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
              <ul class="zcdl nav navbar-nav pull-right">
                <li>
                  <a @click="toPersonal()" href="javascript:void(0);">admin</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </el-header>
      <el-main style="overflow: hidden"
        ><router-view @getChildName="getChildName"></router-view
      ></el-main>
      <el-footer id="footer">
        <div class="footer">
          <div class="f1">
            <div class="container">
              <div class="ff1 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                <div class="ff1-1">智能手语识别平台</div>
                <div class="ff1-2">专注于帮助聋哑人交流。</div>
                <div class="ff1-3">
                  <p>Q Q客服：888888888</p>
                  <p>客服热线：8808-056-777 / 0079-35712580</p>
                </div>
              </div>
              <div class="ff2 col-lg-8 col-md-8">
                <div class="col-lg-2 col-md-2">
                  <div class="ff2-1">
                    <p>团队信息</p>
                  </div>
                  <p><a href="#">团队介绍</a></p>
                  <p><a href="#">服务条款</a></p>
                  <p><a href="#">法律声明</a></p>
                  <p><a href="#">可接受服务</a></p>
                  <p><a href="#">免责声明</a></p>
                </div>
                <div class="col-lg-2 col-md-2">
                  <div class="ff2-1">
                    <p>技术支持</p>
                  </div>
                  <p><a href="#">联系客服</a></p>
                  <p><a href="#">建站教程</a></p>
                  <p><a href="#">更新日志</a></p>
                  <p><a href="#">博客</a></p>
                  <p><a>免责声明</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-footer>
      <ul class="cbl">
        <li>
          <a href="#">
            <div class="icon d1">
              <i class="i1"></i><span class="title">在线客服</span>
            </div>
          </a>
        </li>
        <i class="clearfix"></i>
        <li>
          <a href="#">
            <div class="icon d2">
              <i class="i2"></i><span class="title">5981000721</span>
            </div>
          </a>
        </li>
        <i class="clearfix"></i>
        <li>
          <a href="#">
            <div class="icon">
              <i class="i3"></i><span class="title">教程中心</span>
            </div>
          </a>
        </li>
        <i class="clearfix"></i>
      </ul>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      show: false, //头部fixed定位判断，动态绑定 class= " home-header-fixed "
      // :class="{'home-header': true, 'home-header-fixed': show }"
    };
  },
  methods: {
    showOther() {
      document.getElementsByClassName("wd2 clearfix")[0].style.display =
        "block";
    },
    hiddenOther() {
      document.getElementsByClassName("wd2 clearfix")[0].style.display = "none";
    },
    showAbout() {
      document.getElementsByClassName("gy2 clearfix")[0].style.display =
        "block";
    },
    hiddenAbout() {
      document.getElementsByClassName("gy2 clearfix")[0].style.display = "none";
    },
    toMain() {
      this.$router.push("/home");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toIdentity() {
      this.$router.push("/identity");
    },
    toRegister() {
      this.$router.push("/register");
    },
    toCourse() {
      this.$router.push("/course");
    },
    toLearn() {
      this.$router.push("/learn");
    },
    toPersonal() {
      this.$router.push("/personal");
    },
    getChildName(value) {
      if (value == "main") {
        document.getElementById("footer").style.display = "none";
      } else {
        document.getElementById("footer").style.display = "block";
      }
    },
    //头部fixed定位
    showSearch() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 100) {
        // 当页面滚动到高度100px处，动态绑定class 来设置头部固定定位
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
  mounted: function () {
    // 监听页面滚动事件
    window.addEventListener("scroll", this.showSearch);
  },
};
import $ from "jquery";
/*1秒打开部分滑过显示*/
$(function () {
  $(".c6 a").hover(
    function () {
      $(this).find("img:first-child").fadeIn();
    },
    function () {
      $(this).find("img:first-child").fadeOut();
    }
  );
});
</script>

<style lang="css" scoped>
.el-main {
  padding: 0;
  width: 1520px;
}
#daohang {
  width: 1520px;
  margin-left: -20px;
}
.home-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>
